<template>
  <body id="paper">
  <el-form ref="registerForm" :model="registerForm" :rules="rules" class="register-container" label-position="left"
           label-width="0px">
    <h3 class="register_title">用户注册</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="registerForm.username"
                auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="registerForm.password"
                auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item prop="confirm">
      <el-input type="password" v-model="registerForm.confirm"
                auto-complete="off" placeholder="请再次输入密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="text" v-model="registerForm.name"
                auto-complete="off" placeholder="真实姓名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="text" v-model="registerForm.phone"
                auto-complete="off" placeholder="电话号码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="text" v-model="registerForm.email"
                auto-complete="off" placeholder="E-Mail"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 40%;background: #505458;border: none"
                 v-on:click="register">注册
      </el-button>
    </el-form-item>
  </el-form>
  </body>
</template>

<script>
export default {
  name: "Register",
  data() {
    // 密码前端校验
    let validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.confirm !== '') {
          this.$refs.registerForm.validateField('confirm')
        }
        callback()
      }
    }
    let validateConfirm = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '请输入6-20位字符', trigger: 'blur'},
          {validator: validatePassword, trigger: 'blur'}
        ],
        confirm: [
          {required: true, message: '请再次输入密码', trigger: 'blur'},
          {validator: validateConfirm, trigger: 'blur', required: true}
        ]
      },
      checked: true,
      registerForm: {
        username: '',
        password: '',
        confirm: '',
        name: '',
        phone: '',
        email: ''
      }
    }
  },
  methods: {
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.$axios.post('/api/register', {
            username: this.registerForm.username,
            password: this.registerForm.password,
            name: this.registerForm.name,
            phone: this.registerForm.phone,
            email: this.registerForm.email
          }).then(response => {
            if (response) {
              this.$router.replace({path: '/login'})
            } else {
              return false;
            }
          })
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
#paper {
  background: url("../../assets/img/background/login.jpeg") no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

body {
  margin: -5px 0px;
}

.register-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.register_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
